<!DOCTYPE html>
<html>
<head>
	<title>login</title>
	<link rel="stylesheet" type="text/css" href="./assets/css/repeat.css">
	<link rel="stylesheet" type="text/css" href="./assets/css/common.css">
	<link rel="stylesheet" type="text/css" href="./assets/css/rep_page.css">
	<link rel="stylesheet" type="text/css" href="./assets/css/login.css">
	<link rel="stylesheet" type="text/css" href="./assets/css/waves.css">
	<link rel="stylesheet" type="text/css" href="./assets/css/qp.css">

	<script type="text/javascript" src="./assets/js/jquery-3.1.1.min.js"></script>
</head>
<body>

	<div class="header">
		<div class="logo">
			<img src="./assets/img/login_logo.png">
			<div class="logo-txt">
				<span class="zh ft-30">品牌排行网</span>
				<span class="en ft-17">10brandchina.com</span>
			</div>
		</div>
		<div class="nav">
			<ul>
				<li class="active"><a href="./login.html">网站首页</a></li>
				<li><a href="./login.html">十大投票</a></li>
				<li><a href="./login.html">近期榜单</a></li>
				<li><a href="./login.html">品牌咨询</a></li>
				<li><a href="./login.html">关于网站</a></li>
				<!-- <li><a href=""></a></li> -->
			</ul>
		</div>
	</div>

	<div class="login">
		<div class="title">
			<p>用户登录</p>
			<p>使用账号进行登录</p>
		</div>
		<form>
			<div class="login-ic">
				<i class="tel"></i>
				<input type="text" placeholder="请输入手机号" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '请输入手机号';}">
				<div class="clear"> </div>
			</div>
			<div class="login-ic">
				<i class="pwd"></i>
				<input type="password" placeholder="请输入密码" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}">
				<div class="clear"> </div>
			</div>
			<div class="valid">
				<input type="text" placeholder="验证码">
			</div>
			<div class="login-pwd">
				<div class="remember">
					<input type="checkbox" name="remember">
					<span>记住密码</span>
				</div>
				<div class="enterVip">
					<input type="checkbox" name="enterVip">
					<span>进入会员中心</span>
				</div>
				<a href="#">找回密码</a>
			</div>
		
			<div class="log-bwn">
				<input type="submit" value="登 录">
			</div>
			<div class="log-regis">
				<i class="reg"></i>
				<span class="regis">注册会员</span>
			</div>
		</form>
		<div class="qr_code">
			<img src="./assets/img/login_saoma.png" />
		</div>
	</div>

	<canvas id="canvas" min-width='1200'></canvas>

	<div class="circle-box" id="circle-box">
		<div id="li1"></div>
		<div id="li2"></div>
		<div id="li3"></div>
		<div id="li4"></div>
		<div id="li5"></div>
		<div id="li6"></div>
	</div>

<script type="text/javascript">
	var boxs = document.getElementById('circle-box').getElementsByTagName('div')

	randomState()
	function randomState() {
		for (var i = 0; i < boxs.length; i++) {
			var rangle = Math.floor(Math.random() * 180) + 'deg'
			// boxs[i].style.backgroundImage = `linear-gradient(${rangle}, #ef2c2c, #db1d1e)`
		}
	}
	setInterval(randomState, 2000)

	$(function () {
		$('.login-ic').click(function() {
			$(this).addClass('login-ic-active')
			$(this).siblings().removeClass('login-ic-active')
			$('.valid input').removeClass('login-ic-active')
		})
		$('.valid input').click(function () {
			$(this).addClass('login-ic-active')
			$('.login-ic').removeClass('login-ic-active')
		})
		$('.dg').hide()
	})
</script>

<!-- <script type="text/javascript" src="./assets/js/qp.js"></script> -->

<script src="./assets/js/simplex-noise.min.js"></script>
<script src="./assets/js/dat.gui.min.js"></script> 
<script type="text/javascript" src="./assets/js/wave_colors.js"></script>
</body>
</html>